<template>
	<!-- <u-navbar title="查询分页列表" bgColor="#FBFBFF" :autoBack="true" :style="{ paddingTop: safeAreaInsets?.top + 'px' }">
	</u-navbar> -->
	<view class="baseForm">
		<!-- 卡片显示 -->
		<!-- <text class="list-title">列表信息({{ total }})</text> -->
		<view v-if="indexList.length" class="list">
			<!-- 列表 -->
			<u-list class="list" v-if="total" lowerThreshold="100px" :scrollable="false" height="auto">
				<u-list-item v-for="(item, index) in indexList" :key="item.id" @click="jumpToDetail(item.id)">
					<view class="card">
						<view class="left">
							<view :class="item.readed === 0 ? 'circle unread' : 'circle readed'"></view>
						</view>

						<view class="center">
							<view class="title">
								{{ item.title }}
							</view>
							<view class="body">
								{{ item.msgBody }}
							</view>
						</view>
						<view class="right">
							<u-icon name="arrow-right" color="#eee" size="14px"></u-icon>
						</view>

						<view class="sendTime">
							{{ item.sendTime.split(' ')[0] }}
						</view>
					</view>
				</u-list-item>
			</u-list>
		</view>
		<u-loading-icon v-if="loading"></u-loading-icon>
		<view v-if="!loading && !indexList.length">
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"></u-empty>
		</view>
	</view>
	<u-back-top :scroll-top="scrollTop" top="200" mode="squery"></u-back-top>
</template>

<script lang="ts" setup>
import { ref } from 'vue';
import { onPageScroll, onReachBottom, onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { http } from '@/utils/http';
import { PageResult } from '@/types/type';

const scrollTop = ref(0);
onPageScroll((e) => {
	scrollTop.value = e.scrollTop;
});

// 触底监听
onReachBottom(() => {
	scrolltolower();
});

// 跳转至详情页面
function jumpToDetail(id?: string) {
	uni.navigateTo({
		url: `/pages/user/messageDetail?id=${id}`
	});
}

// 请求列表参数定义
const indexList = ref([]); // 列表数据
const current = ref(0); // 当前页
const totalPage = ref(0); //累计分页
const total = ref(0); // 累计条数
const code = ref(''); // 扫码结果

// 初始化参数
function reset() {
	current.value = 0;
	indexList.value = [];
	total.value = 0;
	totalPage.value = 0;
}

// 页面展示时刷新
onShow(() => {
	current.value = 0;
	indexList.value = [];
	loadmore();
});

onPullDownRefresh(() => {
	current.value = 0;
	indexList.value = [];
	loadmore('refresh');
});

// 请求处理
const loading = ref(false);
async function loadmore(type?: string) {
	try {
		loading.value = true;
		current.value += 1;
		const result: PageResult<any> = await http({
			method: 'POST',
			url: '/system/sysmessage/queryByPage',
			data: {
				current: current.value,
				size: 20,
				data: {
					id: code.value
				}
			}
		});
		const list = result.data;
		totalPage.value = result.page;
		total.value = result.total;
		for (let i = 0; i < list.length; i++) {
			indexList.value.push(list[i]);
		}
		loading.value = false;
		type === 'refresh' && uni.stopPullDownRefresh();
	} catch (e) {
		loading.value = false;
		console.log(e);
	}
}
const scrolltolower = () => {
	totalPage.value > current.value && loadmore();
};
</script>

<style lang="scss" scoped>
.baseForm {
	background-color: #f7f8ff;
	
	// #ifndef APP-PLUS
	min-height: calc(100vh - 44px);
	// #endif
	
	// #ifdef APP-PLUS
	min-height: 100vh;
	// #endif
	
	.list-title {
		line-height: 40px;
		font-size: 14px;
		color: rgba(0, 0, 0, 0.4);
		margin-left: 15px;
	}
	.list {
		// margin: $uni-page-padding;
		.card {
			background-color: #fff;
			position: relative;
			margin: 5px 10px;
			border-radius: 20px;
			display: flex;
			align-items: center;
			padding: 12px 0;
			transition: all 300ms ease;
			// box-shadow: 0 0 1px rgba(0, 0, 0, 0.5);
			.sendTime {
				position: absolute;
				right: 26rpx;
				top: 14px;
				font-size: 12px;
				color: #8f8e94;
			}
			.left {
				flex-basis: 70rpx;
				justify-items: center;
				display: flex;
				justify-content: center;
				.circle {
					width: 10px;
					height: 10px;
					border-radius: 100%;
				}
				.readed {
					background-color: rgba(121, 157, 242, 0.3);
				}
				.unread {
					background-color: #0076ff;
				}
			}
			.right {
				flex-basis: 70rpx;
				justify-items: center;
				display: flex;
				justify-content: center;
				.u-icon--right {
					margin-top: 23px;
				}
			}
			.center {
				width: 580rpx;
				.title {
					font-size: 15px;
					line-height: 20px;
					margin-bottom: 6px;
					width: 440rpx;
					text-overflow: ellipsis;
					overflow: hidden;
					white-space: nowrap;
				}
				.body {
					color: rgba(0, 0, 0, 0.4);
					font-size: 13px;
					line-height: 18px;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}
}
</style>
